<template>
  <view class="container">


    <view class="flex-input">
      <view class="">
        代理比例
      </view>
      <input type="text" v-model="agent" placeholder="代理比例(不能超过自己的代理比例)"/>
    </view>
    <view class="flex-input">
      <view class=" flex_1">
        电话号码
      </view>
      <up-input  maxlength="11" border="none" type="text" v-model="mobile" @change="mobileChange"
                placeholder="电话号码"/>

    </view>
    <view class="flex-input">
      <view class="">
        昵称
      </view>
      <text>{{ nickname }}</text>

    </view>


    <view class="box-tips">
      我的代理比例:{{ userInfo.agent || 0 }}%
    </view>

    <view class="but" @click="submit">
      提交
    </view>


  </view>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";

const {appContext, proxy} = getCurrentInstance();

let mobile = ''
let agent = ''
const nickname = ref('')
const mobileChange = (val) => {
  nickname.value = ''
  if (val.length == 11) {
    proxy.$request({
      url: 'api/transfer/?mobile=' + val,
      method: 'get',
      success(res) {
        console.log(res, 'res')
        if (res.errno == 0) {
          nickname.value = res.data.nickname
        }
      }
    })
  }
}
let userInfo = uni.getStorageSync('userInfo')
onLoad((option) => {
  console.log('页面onLoad')
  let pm = "13912345678"
  let pin = pm.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
  console.log(pin, '123456');
})
onShow(() => {
  console.log('页面onShow')
  let user = uni.getStorageSync('userInfo')
  userInfo.head = user.head
  userInfo.nickname = user.nickname
  userInfo.mobile = user.mobile
  userInfo.CreatedAt = user.CreatedAt.substring(0, 10);
})

function goURl() {
  uni.navigateBack()
}

function uploadFileRes(num) {
  console.log(num, 'num', userInfo)
  userInfo.head = num
}

function submit() {
  if (!mobile || !agent) {
    uni.showToast({
      icon: 'none',
      title: '请填写完整信息 '
    })
    return
  }
  appContext.config.globalProperties.$request({
    url: `api/setAgent/`,
    method: 'post',
    data: {
      mobile: mobile,
      agent: Number(agent)
    },
    success(res) {
      if (res.errno == 0) {

        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })
        userInfo = res.data


        setTimeout(() => {
          uni.switchTab({
            url: '/pages/personal/index'
          })
        }, 1000)
      } else {
        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30upx;

  .content {
    padding: 30upx;
    background-color: #fff;
    border-radius: 30upx;
  }

  .btn {
    background-color: $color4;
    color: #fff;
    text-align: center;
    padding: 20upx 0;
    font-size: 16px;
    margin-top: 30upx;
    font-weight: bold;
    border-radius: 40upx;
  }

  .btns {
    background-color: #ccc;
    color: #fff;
  }

  .flex-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #DDDDDD;
    height: 96rpx;
    font-size: 28rpx;
    color: #2D2D2D;

    input {
      text-align: right;
    }
  }

  .but {
    height: 80rpx;
    background: #F63B29;
    border-radius: 16rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 80rpx;
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 60rpx;
  }
}

.box-tips {
  font-weight: 400;
  font-size: 28rpx;
  color: #2D2D2D;
  margin-top: 40rpx;
  text-align: right;
}
:deep(.uni-input-wrapper){
  text-align: right;
}
</style>
